<template>
  <el-form-item
    :label="label + (prefixUnit ? prefixUnit : '') + labelSuffix"
    :prop="prop"
    :rules="rules"
    :label-width="labelWidth"
    :size="size"
    :show-message="showMessage"
    :inline-message="inlineMessage"
    :class="[
      ['upload', 'map', 'transfer'].includes(type) ? 'label-special' : '',
      'upload-' + listType
    ]"
  >
    <span v-if="prefixText" class="prefix-text" :class="{ 'upload-text': listType === 'upload' }">{{
      prefixText
    }}</span>
    <slot></slot>
    <span v-if="suffixText" class="suffix-text">{{ suffixText }}</span>
  </el-form-item>
</template>

<script setup>
import verify from './utils/verify.js'
import { ref, computed } from 'vue'
let rules = ref(null)
const props = defineProps({
  listType: String,
  type: String,
  model: Object,
  label: String,
  prefixUnit: String,
  prop: String,
  labelWidth: String,
  size: String,
  required: Boolean,
  labelSuffix: {
    type: String,
    default: ':'
  },
  prefixText: {
    type: String,
    default: ''
  },
  suffixText: {
    type: String,
    default: ''
  },
  regexp: {
    type: [String, RegExp],
    default: ''
  },
  trigger: {
    type: String,
    default: 'change'
  },
  showMessage: {
    type: Boolean,
    default: true
  },
  inlineMessage: Boolean,
  tips: {
    type: String,
    default: ''
  },
  errMsg: String
})

rules = computed(() => {
  return verify({
    label: props.label ? props.label.replace(/[:|：]$/g, '') : '',
    type: props.regexp,
    required: props.required,
    trigger: props.trigger,
    tips: props.tips,
    errMsg: props.errMsg
  })
})
</script>
<style lang="scss" scoped>
.ls-form .el-radio {
  line-height: 32px !important;
}
.label-special {
  :deep(.el-form-item__label-wrap > .el-form-item__label) {
    transform: translateY(-9px);
  }
}
.label-special.upload-text {
  :deep(.el-form-item__label-wrap > .el-form-item__label) {
    transform: translateY(0px) !important;
  }
}
.prefix-text,
.suffix-text {
  padding-right: 5px;
  flex-shrink: 0;
  color: var(--text-secondary, #666);
  font-size: 14px;
}
.suffix-text {
  padding-left: 5px;
}
</style>
